<template>
  <view class="wrapper">
    <!-- 收货信息 -->
    <!-- 需要在 manifest.json 中配置授权 -->
    <!-- 然后根据是否有收获地址显示这部分信息，无收货地址显示一个按钮 -->
    <view class="shipment" v-if="address">
      <view class="dt">收货人:</view>
      <view class="dd meta">
        <text class="name">{{ address.userName }}</text>
        <text class="phone">{{ address.telNumber }}</text>
      </view>
      <view class="dt">收货地址:</view>
      <view class="dd">{{ address.provinceName }} {{ address.cityName }} {{ address.countyName }} {{ address.detailInfo }}</view>
    </view>
    <button style="margin:10rpx;" type="primary" v-else @click="getAddress">请选择收获地址</button>
    <!-- 购物车 -->
    <view class="carts">
      <view class="item">
        <!-- 店铺名称 -->
        <view class="shopname">FLY生活馆</view>
        <view class="emptyCart" v-if="cartGoodsData.length === 0">您的购物车为空</view>
        <view class="goods" v-else v-for="item in cartGoodsData" :key="item.goods_id">
          <!-- 商品图片 -->
          <image
            class="pic"
            :src="item.goods_small_logo"
          />
          <!-- 商品信息 -->
          <view class="meta">
            <view class="name">{{ item.goods_name }}</view>
            <view class="price">
              <text>￥</text>{{ item.goods_price }}
              <text>.00</text>
            </view>
            <!-- 加减 -->
            <view class="amount">
              <text class="reduce" @click="reduce(item.goods_id, item.goods_count)">-</text>
              <input
                type="number"
                disabled
                :value="item.goods_count"
                class="number"
              />
              <text class="plus" @click="plus(item.goods_id)">+</text>
            </view>
          </view>
          <!-- 选框 -->
          <view class="checkbox" @click="checkGoods(item.goods_id)">
            <icon
              type="success"
              size="20"
              :color="item.goods_checked ? '#ea4451' : '#ccc'"
            ></icon>
          </view>
        </view>
      </view>
    </view>
    <!-- 其它 -->
    <view class="extra">
      <label class="checkall" @click="checkAllGoods">
        <icon
          type="success"
          :color="isCheckAll ? '#ea4451' : '#ccc'"
          size="20"
        ></icon>全选
      </label>
      <view class="total">
        合计:
        <text>￥</text>
        <label>{{ chexkedGoodsTotal }}</label>
        <text>.00</text>
      </view>
      <view class="delete" @click="deleteGoods">删除({{ checkedGoods.length }})</view>
      <view class="pay" @click="payGoods">结算({{ checkedGoods.length }})</view>
    </view>
  </view>
</template>

<script>
import { createOrderRequest } from '@/api/orders.js'
export default {
  data() {
    return {
      // 购物车商品数据
      // 注意：如果在这里添加获取数据，则会出现只有在页面第一次加载的时候才会重新获取数据，后面重复进入的时候不会获取新数据
      cartGoodsData: [],
      // 收货地址：
      address: null
    }
  },

  computed: {
    // 是否全选
    isCheckAll() {
      if (this.cartGoodsData.length > 0) {
        return this.cartGoodsData.every(item => {
          return item.goods_checked === true
        })
      } else {
        return false
      }
    },

    // 拿到所有已经选中的商品数组
    checkedGoods() {
      return this.cartGoodsData.filter(item => {
        return item.goods_checked === true
      })
    },

    // 计算选中商品的总价：
    chexkedGoodsTotal() {
      return this.checkedGoods.reduce((prev, current) => {
        return prev + (current.goods_count * current.goods_price)
      }, 0)
    },

    // 创建订单所需商品数据（并不需要 checkedGoods 数组中的所有值）
    createOrderData() {
      const data = {}
      data.order_price = this.chexkedGoodsTotal
      // {{ address.provinceName }} {{ address.cityName }} {{ address.countyName }} {{ address.detailInfo }}
      if (this.address) {
        data.consignee_addr = this.address.provinceName + this.address.cityName + this.address.countyName + this.address.detailInfo
      }
      data.goods = this.checkedGoods.map(item => {
        const {goods_count, goods_id, goods_price} = item
        return {
          goods_id,
          goods_number: goods_count,
          goods_price
        }
      })
      return data
    }
  },

  // 页面重复执行钩子
  onShow() {
    this.getCartGoodsData()
  },

  methods: {
    // 加载本地存储里的购物车数据
    getCartGoodsData() {
      this.cartGoodsData = uni.getStorageSync('goodsCart')
    },

    // 减少商品数量
    reduce(id, count) {
      // 如果商品数量等于 1，则不允许再减少
      if(count === 1) return
      this.cartGoodsData.forEach(item => {
        if (id === item.goods_id) {
          item.goods_count--
        }
      })
      // 存进本地存储
      uni.setStorage({
        key: 'goodsCart',
        data: this.cartGoodsData
      })
    },

    // 添加商品数量：
    plus(id) {
      this.cartGoodsData.forEach(item => {
        if (id === item.goods_id) {
          item.goods_count++
        }
      })
      // 存进本地存储
      uni.setStorage({
        key: 'goodsCart',
        data: this.cartGoodsData
      })
    },

    // 单选商品
    checkGoods(id) {
      this.cartGoodsData.forEach(item => {
        if (id === item.goods_id) {
          item.goods_checked = !item.goods_checked
        }
      })
      // 存进本地存储
      uni.setStorage({
        key: 'goodsCart',
        data: this.cartGoodsData
      })
    },

    // 全选商品：
    checkAllGoods() {
      // 删除按键的bug解决：判断购物车中是否有商品，如果没有，则无法点击全选按钮：
      if (this.cartGoodsData.length === 0) return
      // 判断全选的值是否为true
      if (this.isCheckAll) {
        // 处于全选状态时，点击全部变成全未选中
        this.cartGoodsData.forEach(item => {
          item.goods_checked = false
        })
      } else {
        // 处于全未选中状态时，点击变成全选状态
        this.cartGoodsData.forEach(item => {
          item.goods_checked = true
        })
      }
      // 存进本地存储
      uni.setStorage({
        key: 'goodsCart',
        data: this.cartGoodsData
      })
    },

    // 批量删除购物车商品：
    deleteGoods() {
      // 判断购物车中是否有商品，如果没有，则无法点击删除按钮：
      if (this.cartGoodsData.length === 0) return
      // 获取购物车商品列表中未被选中的商品，并保留下来，同时存进本地存储
      this.cartGoodsData = this.cartGoodsData.filter(item => {
        return item.goods_checked === false
      })
      // 存进本地
      uni.setStorage({
        key: 'goodsCart',
        data: this.cartGoodsData
      })
    },

    // 获取用户收货地址
    async getAddress() {
      const res = await uni.chooseAddress()
      this.address = res
      console.log(this.address)
    },

    // 结算按钮
    async payGoods() {
      // 判断购物车中是否有商品，如果没有，则无法点击支付按钮：
      if (this.cartGoodsData.length === 0) return
      /**
       * 结算需要满足的条件：
       * 1、购物车中有勾选的商品：
       * 2、有收货地址
       * 3、处于登录状态（即有token）
       */
      // 购物车中有勾选的商品：
      if (this.checkedGoods.length === 0) {
        uni.showToast({
          title: '无结算商品'
        })
        return
      }
      // 有收货地址
      if (!this.address) {
        uni.showToast({
          title: '无收货地址'
        })
        return
      }
      // 处于登录状态（即有token）
      if (uni.getStorageSync('fly-shopping-token') && uni.getStorageSync('fly-shopping-token') !== '') {
        // 可以创建订单：
        // 由于没有权限，因此只能模拟：
        // 以下是正常书写（不能使用）：
        const { msg, data } = await createOrderRequest(this.createOrderData)
        if (msg.status !== 200) {
          // 创建失败
          uni.showToast({
            title: '订单创建失败'
          })
          // return
        }
        // 创建成功：
        // 删除掉已经购买的商品：
        this.deleteGoods()
        uni.showToast({
          title: '订单创建成功'
        })
        // 跳转到订单页面：
        uni.navigateTo({
          url: '/packone/order/index'
        })
      } else {
        uni.showToast({
          title: '您未登录'
        })
        return
      }
    }
  }
}
</script>

<style scoped lang="scss">
.shipment {
  height: 100rpx;
  line-height: 2;
  padding: 30rpx 30rpx 40rpx 30rpx;
  font-size: 27rpx;
  color: #333;
  background-color: #fff;
  background-image: url(http://static.botue.com/ugo/images/cart_border%402x.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: bottom;

  .dt {
    width: 140rpx;
    float: left;
    clear: both;
  }

  .dd {
    padding-left: 160rpx;
  }

  .meta {
    padding-right: 50rpx;
  }

  text.phone {
    float: right;
  }
}

.carts {
  background-color: #f4f4f4;
  padding-bottom: 110rpx;
  overflow: hidden;

  .shopname {
    padding: 30rpx;
    margin-top: 20rpx;
    font-size: 30rpx;
    color: #333;
    background-color: #fff;
    border-top: 1rpx solid #eee;
    border-bottom: 1rpx solid #eee;
  }

  .emptyCart {
    color: rgb(138, 138, 138);
    background-color: #fff;
    text-align: center;
    border-bottom: 2rpx solid #eee;
    height: 80rpx;
    line-height: 80rpx;
  }

  .goods {
    display: flex;
    padding: 30rpx 20rpx 30rpx 0;
    margin-left: 100rpx;
    border-bottom: 1rpx solid #eee;
    background-color: #fff;

    position: relative;

    .checkbox {
      width: 101rpx;
      height: 100%;
      background-color: #fff;

      display: flex;
      justify-content: center;
      align-items: center;

      position: absolute;
      left: -100rpx;
      top: 0;
    }

    &:last-child {
      border-bottom: none;
    }

    .pic {
      width: 200rpx;
      height: 200rpx;
      margin-right: 30rpx;
    }

    .meta {
      flex: 1;
      font-size: 27rpx;
      color: #333;
      position: relative;
    }

    .name {
      width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }

    .price {
      position: absolute;
      bottom: 0;

      color: #ea4451;
      font-size: 33rpx;

      text {
        font-size: 22rpx;
      }
    }

    .amount {
      position: absolute;
      bottom: 0;
      right: 20rpx;

      height: 48rpx;
      text-align: center;
      border: 1rpx solid #ddd;
      border-radius: 8rpx;

      display: flex;
      align-items: center;

      text {
        display: block;
        width: 60rpx;
        line-height: 48rpx;
        font-size: 36rpx;
        color: #ddd;
        text-align: center;
      }

      input {
        width: 60rpx;
        height: 48rpx;
        min-height: 48rpx;
        font-size: 27rpx;
        border-left: 1rpx solid #ddd;
        border-right: 1rpx solid #ddd;
      }
    }
  }
}

.extra {
  position: fixed;
  bottom: 0;
  /* #ifdef H5 */
  bottom: 50px;
  /* #endif */
  left: 0;
  z-index: 9;

  width: 750rpx;
  height: 96rpx;
  text-align: center;
  line-height: 96rpx;
  font-size: 36rpx;
  border-top: 1rpx solid #eee;
  background-color: #fff;
  color: #333;
  display: flex;

  .checkall {
    width: 140rpx;
    line-height: 1;
    margin-left: 25rpx;
    display: flex;
    align-items: center;

    icon {
      margin-right: 20rpx;
    }
  }

  .total {
    display: flex;
    justify-content: center;
    flex: 1;

    label,
    text {
      color: #ea4451;
      vertical-align: bottom;
      position: relative;
      bottom: -2rpx;
    }

    text {
      position: relative;
      bottom: -3rpx;
      font-size: 24rpx;

      &:first-child {
        margin-left: 10rpx;
      }
    }
  }

  .pay {
    width: 150rpx;
    background-color: #4ead5e;
    color: #fff;
  }

  .delete {
    width: 150rpx;
    background-color: #f33939;
    color: #fff;
  }
}
</style>

